const path = require('path');
const {
    CleanWebpackPlugin
} = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        "index1": path.resolve(__dirname, "index1.js"), // chunk1
        "index2": path.resolve(__dirname, "index2.js") // chunk2
    },
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "[name][contenthash:4].js"
    },
    module: {
        rules: [{
            test: /\.styl$/,
            use: ["style-loader", "css-loader", "stylus-loader"], // 处理stylus文件，style-loader似乎是必须的
        }]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, "index.html"),
            chunks: ["index1", "index2", "commons"], // 注入代码块，别忘了commons
        }),
    ],
    mode: "production",
    optimization: { // 优化选项
        splitChunks: { // 代码分割
            cacheGroups: { // 分割的代码块
                commons: { // commons代码块
                    name: "commons",
                    chunks: "initial", // 只有入口的代码才作分割
                    minSize: 100, // chunks的最小大小
                    minChunks: 2, // 引用两次就被分包
                }
            }
        }
    }
};